<link rel="stylesheet" href="/assets/home/css/details.css">
<!-- 引入mescroll -->
<link rel="stylesheet" href="/assets/home/mescroll/mescroll.min.css">
<script src="/assets/home/mescroll/mescroll.min.js"></script>

<style>
  .mui-ellipsis {
    overflow: initial;
    white-space: wrap;
    text-overflow: initial;
    text-align: justify;
  }
</style>


<div class="title" style="text-align: center;font-weight: bold;font-size: 18px;">
  用户评论
</div>

<!-- 评论内容 -->
<div id="comlist">
  <ul class="mui-table-view">
  </ul>
</div>
<!-- <div class="list_last" style="background: transparent;margin-top: 20px;margin-bottom: 50px;">已经到底了</div> -->

<script>
  // 定义页码
  let page = 1;
  let limit = 5;

  var mescroll = new MeScroll("comlist", {
    down: {
      callback: downCallback, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
      auto: false
    },
    up: {
      callback: upCallback, //上拉加载的回调
      auto: true,
      page: {
        size: limit //每页数据条数,默认10
      },
      toTop: {
        //回到顶部按钮
        src: "/assets/img/mescroll-totop.png", //图片路径,默认null,支持网络图
        offset: 100 //列表滚动1000px才显示回到顶部按钮	
      },
      empty: {
        //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
        warpId: "typelist", //父布局的id (1.3.5版本支持传入dom元素)
        tip: "暂无相关数据~" //提示
      },
    }
  });

  // 下拉刷新的回调
  function downCallback() {
    // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
    mescroll.resetUpScroll()
    $("#comlist ul").html('')
  }

  //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
  async function upCallback(curent) {
    page = curent.num,
      limit = curent.size;

    let params = new URLSearchParams(window.location.search);
    // 获取参数值
    let subid = params.get('subid'); 

    let data = {
      page: page,
      limit: limit,
      subid: subid
    }

    $.ajax({
      type: "POST",
      url: `{:url('home/subject/commentlist')}`,
      data: data,
      dataType: "json",
      success: function (result) {
        console.log(result)
        if (result.code == 1) {
          let list = result.data.list
          let count = result.data.count
          //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
          //必传参数(当前页的数据个数, 总数据量)
          mescroll.endBySize(list.length, count);
          getListData(list)
        } else {
          mescroll.endBySize(0, 0);
        }
      }
    })
  }

  // 回车事件
  $("#keywords").keydown(function (event) {
    if (event.keyCode == 13) {
      downCallback()
    }
  })

  // 渲染列表
  function getListData(data) {
    data.forEach((item) => {
      let str = `
      <li class="mui-table-view-cell mui-media">
      <a href="javascript:;">
        <img class="mui-media-object mui-pull-left userimg" src="${item.avatar}">
        <div class="mui-media-body">
          <div class="mmb_top">
            <span class="nickname">${item.nickname}</span>
            <span class="time">${item.createtime}</span>
          </div>
          <p class='mui-ellipsis'>${item.content}</p>
        </div>
      </a>
    </li>
          `
      $("#comlist ul").append(str)
    })
  }
</script>